<template>
    <div class="inventory">
        <div class="all_all_all">
            <div class="allcirlist">
                <el-progress type="circle" :show-text="false" :percentage="Number(guanlist.mNums)" :width="40"
                    text-color="#000"></el-progress>
                <div class="textCenter">
                    <div class="font">{{ Number(guanlist.mNums) }}%</div>
                </div>
                <div style="background: none;color: #000;">母鹅存栏量</div>
            </div>
            <div class="allcirlist">
                <el-progress type="circle" :show-text="false" :percentage="Number(guanlist.gNums)" :width="40"
                    text-color="#000"></el-progress>
                <div class="textCenter">
                    <div class="font">{{ Number(guanlist.gNums) }}%</div>
                </div>
                <div style="background: none;color: #000;">公鹅存栏量</div>
            </div>
            <div class="allcirlist">
                <el-progress type="circle" :show-text="false" :percentage="Number(guanlist.sNums)" :width="40"
                    text-color="#000"></el-progress>
                <div class="textCenter">
                    <div class="font">{{ Number(guanlist.sNums) }}%</div>
                </div>
                <div style="background: none;color: #000;">死亡量</div>
            </div>
            <div class="allcirlist">
                <el-progress type="circle" :show-text="false" :percentage="Number(guanlist.fNums)" :width="40"
                    text-color="#000"></el-progress>
                <div class="textCenter">
                    <div class="font">{{ Number(guanlist.fNums) }}%</div>
                </div>
                <div style="background: none;color: #000;">防疫量</div>
            </div>
            <div class="allcirlist">
                <div style="color: #000;">{{ Number(guanlist.yNums) }}斤</div>
                <div style="background: none;color: #000;">饮水量</div>
            </div>
            <div class="allcirlist">
                <div style="color: #000;">{{ guanlist.rNums }}</div>
                <div style="background: none;color: #000;">肉料比</div>
            </div>
            <div class="allcirlist">
                <el-progress :show-text="false" type="circle" :percentage="Number(guanlist.cNums)" :width="40"
                    color="#000"></el-progress>
                <div class="textCenter">
                    <div class="font">{{ Number(guanlist.cNums) }}%</div>
                </div>
                <div style="background: none;color: #000;">落残比</div>
            </div>
            <div class="allcirlist">
                <div style="color: #000;">{{ Number(guanlist.zNums) }}斤</div>
                <div style="background: none;color: #000;">阶段体重</div>
            </div>
            <div class="all_boottemlist" v-for="(item, index) in guanlist.list" :key="index">
                <div>{{ item.name }}</div>
                <div>{{ item.can1 }}</div>
                <div>{{ item.can2 }}</div>
                <div>{{ item.can3 }}</div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';


const guanlist = ref({
    mNums: "80", //母鹅存栏量
    gNums: 44, //公鹅存栏量
    sNums: 2, //伤亡量
    fNums: 14, //防疫量
    yNums: 3000, //饮水量
    rNums: "1:3", //肉料比
    cNums: 10, //落残比
    zNums: 5, //阶段体重
})

</script>

<style lang="less" scoped>
.inventory {
    width: 6.25rem;
    height: 3.825rem;
    background-image: url(../assets/imgs/icon_zhgj.png);
    background-repeat: no-repeat;
    background-size: 100%;
    padding: .75rem .125rem .25rem;
    box-sizing: border-box;
    // color: #000;

    .all_all_all {
        width: 100%;
        /* height: 240px; */
        /* background-color: aqua; */
        margin-top: .375rem;
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
    }

    .allcirlist {
        position: relative;
        width: 1.25rem;
        padding: .0625rem 0;
        margin-top: .0625rem;
        color: #000;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;

        .textCenter {
            position: absolute;
            top: .1625rem;
            font-size: 10px;

            .font {
                color: #000;
            }
        }
    }

    .allcirlist div {
        margin-top: .0625rem;
    }

    .allcirlist:nth-child(1) {
        background-color: #ffbf6b;
    }

    .allcirlist:nth-child(2) {
        background-color: #81caf5;
    }

    .allcirlist:nth-child(3) {
        background-color: #de868f;
    }

    .allcirlist:nth-child(4) {
        background-color: #93d2f3;
    }

    .allcirlist:nth-child(5) {
        background-color: #6bd8ff;
    }

    .allcirlist:nth-child(6) {
        background-color: #ffbf6b;
    }

    .allcirlist:nth-child(7) {
        background-color: #7f83f7;
    }

    .allcirlist:nth-child(8) {
        background-color: #a2ef4d;
    }

    .all_boottemlist {
        display: flex;
        width: 100%;
        justify-content: space-around;
        padding: .0625rem 0;
    }

    .all_boottemlist div {
        width: 100px;
        text-align: center;
        /* background-color: #81caf5; */
        font-size: .1625rem;
        font-weight: lighter;
    }
}
</style>